<script lang="ts" setup>
import { reactive, ref, unref, ComponentPublicInstance, onMounted } from 'vue';
import cmps from './components'

const compList: Record<string, any> = {
  ...cmps,
}
const data = reactive({
    type: 'le-goods',
    label: '商品组件'
})
const formItemRef1 = ref<ComponentPublicInstance | null>(null)
const validate = () => {
    const cmpRefType = compList[data.type]
    const itemRef1 = formItemRef1.value as InstanceType<typeof cmpRefType> | null
    const validate = itemRef1?.validte || itemRef1.validate
    console.log('itemRef==', cmpRefType, validate)
}
</script>
<template>
    <div>
        <a-button @click="validate">点击校验</a-button>
        <div>{{ data.label }}</div>
        <template v-if="compList[data.type]">
            <component :is="compList[data.type]" ref="formItemRef1"></component>
        </template>
        <component :is="data.type" ref="formItemRef2"></component>
    </div>
</template>